<template>
	<view class="cate-container">
		<scroll-view class="cates-wrap" scroll-y="true" >
			<view class="cates">
				<view 
					v-for="(cate,index) in cates" 
					:key="cate.id"
					:class="['cate', {active: index === activeIndex}]"
					@tap="switchActiveIndex(index)"
				>
					{{cate.name}}
				</view>
			</view>
		</scroll-view>
		<scroll-view class="items-wrap" scroll-y="true" >
			<view class="items">
				<navigator :url="'/pages/detail/detail?id='+item.id" v-for="item in items" :key="item.id">
					<view class="item">
						<image :src="item.pic" mode="scaleToFill"></image>
						<view class="item-info">
							<text class="item-name">商品名:{{item.name}}</text>
							<text class="price">商品价格:￥{{item.minPrice}}</text>
						</view>
					</view>
				</navigator>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cates: [],
				items: [],
				activeIndex: 0
			}
		},
		methods: {
			switchActiveIndex(index){
				this.activeIndex = index;
				this.fetchActiveItems();
			},
			fetchCates(){
				this.$request('/shop/goods/category/all').then(res => {
					if (res.code === 0) {
						this.cates = res.data;
						this.fetchActiveItems();
					}
				})
			},
			fetchActiveItems(){
				this.$request('/shop/goods/list/v2', {
					method:'POST',
					data: {
						categoryId: this.cates[this.activeIndex].id
					}
				}).then(res => {
					if (res.code === 0) {
						this.items = res.data.result
					}
					if (res.code === 700) {
						this.items = []
					}
				})
			}
		},
		onLoad(){
			this.fetchCates();
		}
	}
</script>

<style lang="scss" scoped>
.cate-container{
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
	.cates-wrap{
		width: 250rpx;
		height: 100%;
		border-right: 1rpx solid #ccc;
		background-color: #fafafa;
		.cate{
			line-height: 34px;
			font-size: 14px;
			color: #333;
			text-align: center;
			&.active{
				background-color: #fff;
				color: #f66;
				position: relative;
				&::after{
					content: "";
					display: block;
					width: 2px;
					height: 34px;
					background-color: #f66;
					position: absolute;
					left: 0;
					top: 0;
				}
			}
		}
	}
	.items-wrap {
		width: 500rpx;
		height: 100%;
		.item {
			display: flex;
			align-items: center;
		
			.item-info {
				flex: 1;
			}
		
			image {
				width: 160rpx;
				height: 160rpx;
			}
		}
	}
}
</style>
